<!-- 消息 -->
<template>
	<uni-nav-bar dark :fixed="true" shadow background-color="#fff" status-bar left-icon="left" left-text="" title="我的积分" @clickLeft="back" />
	<view class="main-point">
		<view class="header">
			<view class="number">
				8267
			</view>
			<view class="rules" @click="pointRule()">
				积分规则 >
			</view>
		</view>
		<nut-tabs v-model="state.tab1value">
			<nut-tab-pane title="积分收支明细">
				<!-- tab切换 -->
				<view class="tab-wrap">
					<view class="tab" v-for="(item, index) in state.popData" :key="index">
						<nut-button
							:color="state.popupIndex == item.index? '#000000' : ''"
							@click="changeType(index)">
							{{item.name}}
						</nut-button>
					</view>
				</view>
				<view class="tab-data">
					<view class="tab-item">
						<view class="left">
							<view class="title">新人会员领取100积分
							</view>
							<view class="time">2023.05.08 12:00:00
							</view>
						</view>
						<view class="right">+100</view>
					</view>
					<view class="tab-item">
						<view class="left">
							<view class="title">商品兑换
							</view>
							<view class="time">2023.05.08 12:00:00
							</view>
						</view>
						<view class="right">-100</view>
					</view>
				</view>
			</nut-tab-pane>
			<nut-tab-pane title="积分兑换明细">
				<view class="tab-data">
					<view class="tab-item">
						<view class="left">
							<view class="title">商品兑换
							</view>
							<view class="time">2023.05.08 12:00:00
							</view>
						</view>
						<view class="right">-100</view>
					</view>
					<view class="tab-item">
						<view class="left">
							<view class="title">商品兑换
							</view>
							<view class="time">2023.05.08 12:00:00
							</view>
						</view>
						<view class="right">-100</view>
					</view>
				</view>
			</nut-tab-pane>
		</nut-tabs>
		<TabBar :current="3"></TabBar>
	</view>
</template>

<script setup>
import TabBar from '@/components/TabBar.vue';
import { reactive } from "vue";

const state = reactive({
	tab1value: '',
	popupIndex: 0,
	popData: [
		{ name: '全部', index: 0 },
		{ name: '已获取', index: 1 },
		{ name: '已消耗', index: 2  }
	],
})

const changeType = (e) => {
	state.popupIndex = e
}

const pointRule = () => {
	uni.navigateTo({
		url: '/pages/my/pointRule'
	})
}

const back = () => {
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="scss" scoped>
page {
	background-color: #fff !important;
}
.main-point {
	padding: 0rpx 28rpx;
	box-sizing: border-box;
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22rpx 58rpx;
		box-sizing: border-box;
		.number {
			font-size: 68rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #000000;
			line-height: 96rpx;
		}
		.rules {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 34rpx;

		}
	}
	.tab-data {
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		margin-top: 40rpx;
		.tab-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			.title {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1C1919;
				line-height: 42rpx;
				margin-bottom: 4rpx;
			}
			.time {
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #CECECE;
				line-height: 28rpx;
			}
			.right {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #CECECE;
				line-height: 42rpx;
			}
		}
	}
}

.tab-wrap {
	display: flex;
	align-items: center;
	margin-right: 12rpx;
	.tab {
		margin-right: 12rpx;
	}
}
</style>
